<template>
  <div class="login-page">
    <vue-particles
        class="login-background"
        color="#FF5722"
        :particleOpacity="0.7"
        :particlesNumber="150"
        shapeType="star"
        :particleSize="4"
        linesColor="#FFB800"
        :linesWidth="1"
        :lineLinked="true"
        :lineOpacity="0.4"
        :linesDistance="150"
        :moveSpeed="8"
        :hoverEffect="true"
        hoverMode="repulse"
        :clickEffect="true"
        clickMode="push">
    </vue-particles>
    <div class="login-other">
      <el-card class="box-card">
        <h3 class="title">WxBuild登录</h3>
        <el-form ref="form" :model="user_form" label-width="80px">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="user_form.username"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input placeholder="请输入密码" type="password" v-model="user_form.password"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login_submit">登录</el-button>
          </el-form-item>
        </el-form>
      </el-card>

    </div>


  </div>
</template>

<script>
import {WxLogin, WxIsLogin} from "@/request/api";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Login",
  created() {
    this.is_login();
  },
  data() {
    return {
      user_form: {
        username: "",
        password: ""
      }
    }
  },
  methods: {
    is_login() {
      WxIsLogin().then(res => {
        if (res.code === 200) {
          this.$router.push("/");
        }
      })
    },
    login_submit() {
      let data = this.user_form;
      WxLogin(data).then(res => {
        if (res.code === 200) {
          this.$message.success("登录成功");
          this.$router.push("/");
        } else {
          this.$message.error(res.msg);
        }
      })
    }
  }
}
</script>

<style scoped>
.login-background {
  background: linear-gradient(-180deg, #6cc6cb 0%, #EAE5c9 100%);
  width: 100%;
  height: 100%; /**宽高100%是为了图片铺满屏幕 */
  z-index: -1;
  position: absolute;
}

.login-other {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  justify-content: center;
  align-items: center;
}

.title {
  text-align: center;
}

.box-card {
  width: 500px;
}
</style>